<script setup lang="ts">
import { computed, ref } from 'vue';

const props = withDefaults(defineProps<Props>(), {
  templateId: '',
});

interface Props {
  templateId?: any;
}

const list = ref([
  {
    id: 'NzjaBOpjmbXPXuOGBP2vPzMYOde4Kdln27yg6KCC3As',
    title: '活动审核通知',
    list: [
      { label: '活动名称', value: 'XXXXXXX' },
      { label: '活动时间', value: '2025年3月26日 16:00' },
      { label: '活动地址', value: '深圳国际会展中心' },
      { label: '审核状态', value: '审核通过' },
      { label: '温馨提示', value: '恭喜您通过审核，点击详情，查看更多信息！' },
    ],
  },
  {
    id: '5RQS2H12uPbKNtZVK7KwFbtq1uwIWv9y1VzQRHUqbGo',
    title: '签到通知',
    list: [
      { label: '名称', value: 'XXXX会签到' },
      { label: '时间', value: '2025年3月26日 16:00' },
      { label: '温馨提示', value: '温馨提示内容示例' },
      { label: '状态', value: '签到成功' },
    ],
  },
]);

const template = computed(() => {
  const target = list.value.find((v) => v.id === props.templateId);
  return target ?? null;
});
</script>

<template>
  <div
    v-if="template"
    class="mx-auto w-[320px] max-w-md rounded-xl bg-white p-5 shadow"
  >
    <!-- Header -->
    <div class="flex items-center space-x-3 border-b pb-4">
      <img
        src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM5oGD2rJFUXDN0iaLLDwFUT9wBnfM1E9EcRuoVgghFBnuw/0"
        alt="logo"
        class="h-10 w-10 rounded-full"
      />
      <span class="text-lg font-semibold">ITES易会通</span>
    </div>

    <!-- Content -->
    <div class="space-y-2 py-4">
      <div class="text-lg font-semibold">{{ template.title }}</div>

      <div
        v-for="(item, i) in template.list"
        :key="i"
        class="mt-3 flex text-sm text-gray-600"
      >
        <span class="w-20">{{ item.label }}</span>
        <span class="font-medium text-gray-800">{{ item.value }}</span>
      </div>
    </div>

    <!-- Footer -->
    <div class="flex items-center justify-between border-t pt-4">
      <span class="text-sm text-gray-600">查看详情</span>
      <svg
        class="h-4 w-4 text-gray-400"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5l7 7-7 7"
        />
      </svg>
    </div>
  </div>
  <div v-else>暂无模板</div>
</template>
